<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" text="width=device-width, initial-scale=1.0">
  <title>添加样式</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/transition.css">
</head>

<body>
  <div id="app">
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="你准备做些什么？"
          class="new-todo"
          v-model="text"
          @keyup.enter="addTodo"
        />
      </header>
      <section class="main">
        <input id="toggle-all" type="checkbox" class="toggle-all">
        <label for="toggle-all">Mark all as complete</label>
        <transition-group class="todo-list" name="list" appear tag="ul">
          <li
            v-for="(todo, index) in todoListSearchComputed"
            class="todo"
            :key="todo"
            :class="{ completed: todo.completed, editing: todo.isEdit }"
          >
            <div class="view">
              <input class="toggle" type="checkbox" v-model="todo.completed">
              <label @dblclick="todo.isEdit = true">{{ todo.text }}</label>
              <button class="destroy" @click="deleteTodo(index)"></button>
            </div>
            <input
              class="edit"
              type="text"
              v-model="todo.text"
              v-todo-focus="todo.isEdi"
              @blur="todo.isEdit = false"
              @keyup.enter="todo.isEdit = false"
            >
          </li>
        </transition-group>
      </section>
      <footer class="footer">
        <span class="todo-count">
          <strong>{{ todoList.length - completedNum }}</strong> 未完成
        </span>
        <ul class="filters">
          <li>
            <a href="#/all" @click="currentStatus = 'ALL'" :class="{selected: currentStatus === 'ALL'}">All</a>
          </li>
          <li>
            <a href="#/completed" @click="currentStatus = 'COMPLETED'" :class="{selected: currentStatus === 'COMPLETED'}">Completed</a>
          </li>
          <li>
            <a href="#/todo" @click="currentStatus = 'TODO'" :class="{selected: currentStatus === 'TODO'}">Todo</a>
          </li>
        </ul>
        <button class="clear-completed" style="display: none;">
          Clear completed
        </button>
      </footer>
    </section>
    <input class="new-todo" type="text" v-model="searchKey" placeholder="搜索待办事项" />
    <footer class="info">
      <p>
        本章无任何新增功能，甚至删掉了一些小功能。本章只是给这套 TODO 应用换了个皮肤。
      </p>
    </footer>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        text: '',
        searchKey: '',
        currentStatus: 'ALL', // 'ALL、COMPLETED、TODO'
        todoList: [],
      },

      computed: {
        completedNum() {
          const completedList = this.todoList.filter(function (item) {
            return item.completed === true
          })
          return completedList.length
        },
        todoListComputed() {
          var currentStatus = this.currentStatus
          var todoList = this.todoList
          if (currentStatus === 'ALL') {
            return todoList
          } else if (currentStatus === 'COMPLETED') {
            return todoList.filter(function (item) {
              return item.completed === true
            })
          } else {
            return todoList.filter(function (item) {
              return item.completed === false
            })
          }
        },
        todoListSearchComputed() {
          var todoListComputed = this.todoListComputed
          var searchKey = this.searchKey.trim()
          if (!searchKey) {
            return todoListComputed
          } else {
            return this.todoListComputed.filter(function (item) {
              return item.text.includes(searchKey)
            })
          }
        },
      },

      watch: {
        todoList: {
          deep: true,
          immediate: true,
          handler(val) {
            if (!val || !val.length) {
              this.todoList = [{
                  text: '明天去洗澡',
                  completed: false,
                  isEdit: false,
                },
                {
                  text: '早上跑步',
                  completed: true,
                  isEdit: false,
                },
                {
                  text: '下午看完视频',
                  completed: false,
                  isEdit: false,
                },
                {
                  text: '晚上跑步',
                  completed: false,
                  isEdit: false,
                },
                {
                  text: '晚上写作业',
                  completed: false,
                  isEdit: false,
                },
              ]
            }
            localStorage.todoList = JSON.stringify(val)
          }
        },
      },

      methods: {
        deleteTodo(index) {
          this.todoList.splice(index, 1)
        },

        addFirst(index) {
          const firstTodo = this.todoList.splice(index, 1)
          this.todoList.unshift(firstTodo[0])
        },

        addTodo() {
          var text = this.text.trim()
          if (!text) {
            alert('请输入内容')
            return
          }
          this.todoList.push({
            text: text,
            completed: false,
            isEdit: false,
          })
          this.text = ''
        },
      }
    })
  </script>
</body>

</html>